<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>cer</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			ul li {
				list-style: none;
				float: left;
				width: 30px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				color: rgba(255, 255, 255, .8);
				font-size: 14px;
			}

			.banner {
				max-width: 1200px;
				margin: 0 auto;
				position: relative;
				margin-top: 60px;
			}

			.banner img {
				width: 100%;
				display: block;
			}

			.banner .page {
				background: rgba(0, 0, 0, .5);
				position: absolute;
				right: 0;
				bottom: 0;
				width: 100%;
			}

			.banner .page ul {
				float: right;
			}

			.current {
				color: #ff6700;
			}
		</style>
	</head>
	<body>
		<div class="app">
			<!-- <h1>wp</h1> -->
			<div class="banner">
				<div class="item">
					<img :src="dataList[currentIndex]">
				</div>
				<div class="page" v-if="this.dataList.length > 1">
					<ul>
						<li @click="gotoPage(prevIndex)">&lt;</li>
						<li v-for="(item,index) in dataList" @click="gotoPage(index)"
							:class="{'current':currentIndex == index}"> {{index+1}}</li>
						<li @click="gotoPage(nextIndex)">&gt;</li>
					</ul>
				</div>
			</div>
		</div>

		<!-- 	<div class="app1">
			<h1>we</h1>
			{{love}}
		</div> -->

		<script type="text/javascript">
			var vm = new Vue({
				el: ".app",
				data: {
					love: '18',
					dataList: ["http://shandazhubao.dev244.ynccxx.cn/template/default/jewel/image/banenr2.png",
						"http://shandazhubao.dev244.ynccxx.cn/uploads/20210726/e43d6a31ae80597e854ddee17890467d.png",
						"http://shandazhubao.dev244.ynccxx.cn/template/default/jewel/image/banner4.png"
					],
					currentIndex: 0, //默认显示图片
					timer: null //定时器

				},
				computed: {
					//上一张
					prevIndex() {
						if (this.currentIndex == 0) {
							return this.dataList.length - 1;
						} else {
							return this.currentIndex - 1;
						}
					},
					//下一张
					nextIndex() {
						if (this.currentIndex == this.dataList.length - 1) {
							return 0;
						} else {
							return this.currentIndex + 1;
						}
					}
				},
				created() {
					this.runInv();
				},
				methods: {
					gotoPage(index) {
						this.currentIndex = index;
					},
					//定时器
					runInv() {
						this.timer = setInterval(() => {
							this.gotoPage(this.nextIndex)
						}, 1999000)
					}

				}
			})
			var vms = new Vue({
				el: ".app1",
				data: {
					love: '18'
				}
			})
			
			console.log(vm);
			// function runInv() {
			// 	this.timer = setInterval(() => {
			// 		console.log(12)
			// 		vm.gotoPage(vm.nextIndex)
			// 		// this.gotoPage(this.nextIndex)
			// 	}, 20000)
			// }
			// runInv();
		</script>
	</body>
</html>
